<template>
  <el-container>
    <el-header>
      <Header/>
    </el-header >
    <el-divider></el-divider>

    <div style="align-self: center">
      <el-input style="width:200px" v-model="roomId" type='number' placeholder="请输入影厅序号" suffix-icon="el-icon-search"></el-input>
      <el-input style="width:200px" v-model="roomType" type='number' placeholder="请输入影厅模板序号" suffix-icon="el-icon-search"></el-input>
      <el-button  class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="clear">重置</el-button>
      <el-button type="warning" @click="dialoginsertVisible=true">增加</el-button>
    </div>

    <el-table
        style="width: 100%"
        :header-cell-style="headStyle"
        :data="tableData"
        border>
      <el-table-column prop="roomId" label="影厅序号" width="200">
      </el-table-column>
      <el-table-column prop="roomType" label="影厅模板" width="200">
      </el-table-column>
      <el-table-column prop="remarks" label="操作">
          <template slot-scope="scope">
        <el-button type="danger" @click="handleClick(scope.row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div  style="padding:10px 0">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page="pageNum"
          :pager-count="11"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          style="margin-left: 300px">
      </el-pagination>
    </div>
    <el-dialog title="添加影厅" :visible.sync="dialoginsertVisible">
      <el-form :model="hall">
        <el-form-item label="影厅模板">
          <el-select v-model="hall.temp" placeholder="请选择影厅模板">
            <el-option label="7*9" value="1"></el-option>
            <el-option label="8*9" value="2"></el-option>
            <el-option label="9*9" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoginsertVisible = false">取消</el-button>
        <el-button type="primary" @click="add">确定</el-button>
      </div>
    </el-dialog>
      <el-dialog title="删除影厅" :visible.sync="deletedialoginsertVisible">
          <span>请问是否要删除？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="deletedialoginsertVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteroom">确 定</el-button>
         </span>
      </el-dialog>
  </el-container>
</template>

<script>
import Header from "@/components/Header";
import request from "@/utils/request";
export default {
  name: "hallmanage",
  components: {Header},
  data(){
    return{
      delroomid: null,
      roomType: null,
      roomId: null,
      total: 100,
      pageSize: 10,
      pageNum: 1,
      dialoginsertVisible:false,
      deletedialoginsertVisible:false,
      hall:{
        temp:'',
      },
        tableData: []
    }
  },
    created() {
        let that = this
      this.load()
    },
    methods:{
    // changNo(){
    //   this.$forceUpdate(0)
    // },
    // headStyle(){
    //   return "text-align:center"
    // },
        handleClick(row) {
            console.log(row);
            this.delroomid =row.roomId;
            this.deletedialoginsertVisible=true;
        },
        deleteroom(){
            request.get("/room/del",{
                params: {
                    roomId: this.delroomid

                }
            }).then((res) =>{
                this.deletedialoginsertVisible=false;
                if (res.code == 200) {
                    this.$message.success(res.mes)

                } else {
                    this.$message.error(res.mes);
                }

            })
        },
        add(){
            request.get("/room/add",{
                params: {
                    temp: this.hall.temp

                }
            }).then((res) =>{

                if (res.code == 200) {
                        this.$message.success(res.mes)
                        this.dialoginsertVisible=false
                } else {
                    this.$message.error(res.mes);
                }

            })

        },
        clear(){
           this.roomType=""
           this.roomId=""
        },

        load(){
            request.get("/room/selectall",{
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    roomId: this.roomId,
                    roomType: this.roomType,

                }
            }).then((res) =>{
                console.log(res)
                this.tableData=res.data
                this.total = res.total
            })

        },
        handleSizeChange(pageSize){
            console.log(pageSize)
            this.pageSize=pageSize
            this.load()
        },
        handleCurrentChange(pageNum){
            console.log(pageNum)
            this.pageNum=pageNum
            this.load()
        }
    }
}
</script>

<style scoped>

</style>